{% load html %}
{% load i18n %}
{% load render_bundle from webpack_loader %}

{% block styles %}
  {% if LANGUAGE_BIDI %}
      {% render_bundle 'openedx.certificate.style-rtl' 'css' %}
    {% else %}
      {% render_bundle 'openedx.certificate.style-ltr' 'css' %}
    {% endif %}
{% endblock %}

{% with program_details=user_credential.credential.program_details %}
<main class="accomplishment">
  <div class="wrapper-accomplishment-rendering">
    <div class="accomplishment-rendering">
      {% with program_details.type|slugify as program_type %}
        <div class="background-watermark">
          {% block background_watermark %}
          {% endblock %}
        </div>
        <div class="wrapper-accomplishment-title">
          <h2 class="accomplishment-title">
            {% block background_logo %}
            {% endblock %}
          </h2>
          <div class="wrapper-accomplishment-orgs">
            <h3 class="accomplishment-orgs-title sr-only">{% trans "Supported by the following organizations" as tmsg %}{{ tmsg | htmlescape }}</h3>
            <ul class="wrapper-orgs list-orgs">
              <li class="wrapper-organization">
                <div class="organization">
                  <img class="organization-logo"
                       src="{{ program_details.organizations.0.certificate_logo_image_url }}"
                       alt="{{ program_details.organizations.0.name }} {% trans 'logo' as tmsg%} {{ tmsg | htmlescape }}">
                </div>
              </li>
            </ul>
          </div>
        </div>
      {% endwith %}


      <div class="wrapper-accomplishment-statement">
        <div class="accomplishment-statement">
          <p class="accomplishment-statement-lead">
            {# Translators: This phrase is followed by a statement of the learner's achievement. e.g. 'has completed the course' #}
            {% trans "{start_span}This is to certify that{end_span} {start_strong} {user_name} {end_strong}" as accomplishment_statement_lead_string %}
            {% interpolate_html accomplishment_statement_lead_string user_name=user_data.name start_span='<span class="accomplishment-statement-detail copy">'|safe end_span='</span>'|safe start_strong='<strong class="accomplishment-recipient">'|safe end_strong='</strong>'|safe %}
            <span class="accomplishment-summary copy">
              {% block accomplishment_summary %}{% endblock %}
            </span>
            <span class="accomplishment-program">
              <span class="accomplishment-program-name">
                  {% firstof credential_title program_details.title %}
              </span>
            </span>

            <span class="accomplishment-statement-detail copy">
              {% filter htmlescape  %}
                {# Translators: organization_name is the display name for the provided organization e.g (e.g., Test Organization). #}
                {% blocktrans trimmed with organization_name=program_details.organizations.0.display_name platform_name=site.siteconfiguration.platform_name %}
                  a program offered by {{ organization_name }}, in collaboration with {{ platform_name }}.
                {% endblocktrans %}
              {% endfilter %}
            </span>
          </p>
        </div>
        <div class="accomplishment-signatories">
          <h3 class="accomplishment-signatories-title sr-only">{% trans "Noted by" as tmsg %}{{ tmsg | htmlescape }}</h3>
          <div class="wrapper-signatories">
            <div class="list-signatories">
              {% for signatory in user_credential.credential.signatories.all %}
              <div class="signatory">
                {% if signatory.image %}
                  <img class="signatory-signature" src="{{ signatory.image.url }}" alt="{{ signatory.name }}">
                {% endif %}
                <h4 class="signatory-name">{{ signatory.name }}</h4>

                <p class="signatory-credentials">
                  {% autoescape off %}
                  <span class="role">{{ signatory.title }}</span>
                  <span class="organization">
                    {% firstof signatory.organization_name_override program_details.organizations.0.name %}
                  </span>
                  {% endautoescape %}
                </p>
              </div>
              {% endfor %}
            </div>
          </div>
        </div>
      </div>
      <div class="wrapper-accomplishment-stamps">
        <ul class="accomplishment-stamps copy-list">
          <li class="accomplishment-stamp-platform">
            {% block platform_logo %}
            {% endblock %}
          </li>
          <li class="accomplishment-stamp-date">
            <span class="title">{% block accomplishment_stamp_title %}{% endblock %}</span>
            <span class="copy-micro emphasized">
              {# Translators: This phrase appears on certificates to show the issue date #}
              {% trans "Issued {month} {year}" as tmsg %}
              {% interpolate_html tmsg month=user_credential.modified|month year=user_credential.modified|date:"Y" as tmsg %}
              {{ tmsg | capfirst }}
            </span>
          </li>
          <li class="accomplishment-stamp-validity">
            <span class="title">{% trans "Valid Certificate ID" as tmsg %}{{ tmsg | htmlescape }}</span>
            <span class="emphasized">{{ user_credential.uuid.hex }}</span>
          </li>

          {% if hours_of_effort %}
            <li class="accomplishment-stamp-effort">
              <span class="title">{% trans "Effort" as tmsg %}{{ tmsg | htmlescape }}</span>
              <span class="emphasized">
                {% filter htmlescape %}
                  {% blocktrans count num_hours=hours_of_effort %}{{num_hours}} hour{% plural %}{{num_hours}} hours{% endblocktrans %}
                {% endfilter %}
              </span>
            </li>
          {% endif %}
        </ul>
      </div>
    </div>
  </div>

  <div class="wrapper-accomplishment-support">
    <div class="accomplishment-support">
      <div class="accomplishment-support-print">
        <p class="support-copy">
          {% blocktrans trimmed asvar accomplishment_support %}
            For tips and tricks on printing your certificate, view the {start_anchor}Web Certificates help 
            documentation{end_anchor}.
          {% endblocktrans %}
          {% interpolate_html accomplishment_support start_anchor='<a href="'|add:site.siteconfiguration.certificate_help_url|add:'">'|safe end_anchor='</a>'|safe %}
        </p>
      </div>
    </div>
  </div>

  {% block certificate_metadata %}
  {% endblock %}
</main>
{% endwith %}
